<template>
  <div id="app">
    <!--
      滑动页面的状态保存：
      1、被keepAlive缓存的组件，他会保存里面的数据
      2、所以我们需要一个变量来记录滑动的高度
      3、然后当我们回退页面的时候，使用这个变量改变当前页面的滑动距离
     -->
    <transition :name='transitionName'>
      <keep-alive :include="virtualTaskStack">
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      transitionName: 'fold-left',
      virtualTaskStack: [
        'imooc'
      ]
    }
  },
  watch: {
    '$route' (to, from) {
      const routerType = to.params.routerType
      if (routerType === 'push') {
        // 当进入新页面的时候保存新页面的名称到虚拟任务栈
        this.virtualTaskStack.push(to.name)
        this.transitionName = 'fold-left'
      } else {
        this.virtualTaskStack.pop()
        this.transitionName = 'fold-right'
      }
      if (to.params.clearTask) {
        this.virtualTaskStack = ['imooc']
      }
    }
  }
}
</script>
<style scoped lang = 'scss'>
#app {
  height: 100%;
  width: 100%;
  .fold-left-enter-active {
    animation-name: fold-left-in;
    animation-duration: 0.4s;
  }
  .fold-left-leave-active {
    animation-name: fold-left-out;
    animation-duration: 0.4s;
  }
  .fold-right-enter-active {
    animation-name: fold-right-in;
    animation-duration: 0.4s;
  }
  .fold-right-leave-active {
    animation-name: fold-right-out;
    animation-duration: 0.4s;
  }
  // 在后退页面时：即将展示页面的动画
  @keyframes fold-right-in {
    0% {
      width: 100%;
      transform: translate(-100%, 0);
    }
    100% {
      width: 100%;
      transform: translate(0, 0);
    }
  }
  // 在后退页面时：即将退出页面的动画
  @keyframes fold-right-out {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(100%, 0);
    }
  }
  @keyframes fold-left-in {
    0% {
      transform: translate3d(100%, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
  // push页面：原页面的退出动画
  @keyframes fold-left-out {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-100%, 0, 0);
    }
  }
}
</style>